<template>
	<view class="content">
		<div class="my_work_box" id="myworkbox" @touchmove.stop.prevent="() => {}">
			<div class="titlebox">
				<text style="color: black;font-size: 21px;font-weight:bold">我的待办</text>
				<image @click="wakepopup()" src="/static/add.png"
					style="display: flex;width: 21px;height: 21px;margin-left: 10px"></image>
			</div>
			<text v-if="internetCode===404" style="margin: 50% auto;font-size: 17px;color: grfay;display:none;"
				id="internetwarm">网络错误！</text>
			<scroll-view scroll-y="true" show-scrollbar="false" style="height: calc(100vh - 130px);">
				<block v-for="item in mywork" :key="item.id">
					<uni-swipe-action style="overflow: hidden;" v-if="item.status==='false'">
						<uni-swipe-action-item :right-options="options" @click="swipeclick(item)" :auto-close="true">
							<div class="work_box" @click="tomodify(item)">
								<div class="work_box_message">
									<text style="font-size: 20px;margin: 8px 17px 3px;">{{ item.title }}</text>
									<text
										style="font-size: 14px;margin: 3px 17px;color: gray;">{{ item.starttime }}至{{ item.endtime }}</text>
									<text style="overflow: hidden;text-overflow: ellipsis;font-size: 14px;margin: 3px 17px;color: gray;display: -webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;">{{ item.space }}</text>
									<text v-if="new Date(item.starttime).getTime()>this.nowtime"
										style="font-size: 14px;margin: 3px 17px 8px;color: green;">距开始还有
										{{((new Date(item.starttime).getTime()-this.nowtime)/86400000).toFixed(2)}} 天</text>
									<text
										v-if="new Date(item.starttime).getTime()<=this.nowtime&&new Date(item.endtime).getTime()>this.nowtime"
										style="font-size: 14px;margin: 3px 17px 8px;color:#FDCD00;">距结束还有
										{{((new Date(item.endtime).getTime()-this.nowtime)/86400000).toFixed(2)}} 天</text>
									<text v-if="new Date(item.endtime).getTime()<this.nowtime"
										style="font-size: 14px;margin: 3px 17px 8px;color: red;">已经结束
										{{((this.nowtime-new Date(item.endtime).getTime())/86400000).toFixed(2)}} 天</text>
								</div>
								<div class="work_box_radio">
									<checkbox-group @change="changeStatus(item)" @click.stop>
										<checkbox :checked="item.status === 'true'" color="#007aff"></checkbox>
									</checkbox-group>
								</div>
							</div>
						</uni-swipe-action-item>
					</uni-swipe-action>
				</block>
				<block v-for="item in mywork" :key="item.id">
					<uni-swipe-action style="overflow: hidden;" v-if="item.status==='true'">
						<uni-swipe-action-item :right-options="options" @click="swipeclick(item)" :auto-close="true">
							<div class="work_box" @click="tomodify(item)">
								<div class="work_box_message" style="text-decoration:line-through;">
									<text style="font-size: 20px;margin: 8px 17px 3px;color: gray;">{{ item.title }}</text>
									<text
										style="font-size: 14px;margin: 3px 17px;color: gray;">{{ item.starttime }}至{{ item.endtime }}</text>
									<text style="overflow: hidden;text-overflow: ellipsis;font-size: 14px;margin: 3px 17px;color: gray;display: -webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;">{{ item.space }}</text>
									<text v-if="new Date(item.starttime).getTime()>this.nowtime"
										style="font-size: 14px;margin: 3px 17px 8px;color: grey;">距开始还有
										{{((new Date(item.starttime).getTime()-this.nowtime)/86400000).toFixed(2)}} 天</text>
									<text
										v-if="new Date(item.starttime).getTime()<=this.nowtime&&new Date(item.endtime).getTime()>this.nowtime"
										style="font-size: 14px;margin: 3px 17px 8px;color: gray;">距结束还有
										{{((new Date(item.endtime).getTime()-this.nowtime)/86400000).toFixed(2)}} 天</text>
									<text v-if="new Date(item.endtime).getTime()<this.nowtime"
										style="font-size: 14px;margin: 3px 17px 8px;color:grey;">已经结束
										{{((this.nowtime-new Date(item.endtime).getTime())/86400000).toFixed(2)}} 天</text>
								</div>
								<div class="work_box_radio">
									<checkbox-group @change="changeStatus(item)" @click.stop>
										<checkbox :checked="item.status === 'true'" color="#007aff"></checkbox>
									</checkbox-group>
								</div>
							</div>
						</uni-swipe-action-item>
					</uni-swipe-action>
				</block>
			</scroll-view>
		</div>
		<div class="mask" v-if="showPopup&&isActive" :class="{'active':ismask}" @click="waitpopup()"></div>
		<view class="popup" v-if="showPopup" :class="{'active':isActive,'wait':isWait}" @click="wakepopup()">
			<view class="popup-body">
				<div class="popup-head">
					<text style="color: red;" @click="hidepopup()">取消</text>
					<text style="color: #007AFF;" @click="addwork()">添加</text>
				</div>
				<div class="mode-bar">
					<div v-if="!ismode" class="mode-bar-choose" @click="swap_mode('private')"
						style="background-color: white;color: #007AFF;">个人事件</div>
					<div v-if="ismode" class="mode-bar-choose" @click="swap_mode('private')">个人事件</div>
					<div v-if="ismode" class="mode-bar-choose" @click="swap_mode('public')"
						style="background-color: white;color: #007AFF">公共事件</div>
					<div v-if="!ismode" class="mode-bar-choose" @click="swap_mode('public')">公共事件</div>
				</div>
				<div class="put_box">
					<div class="do_box">
						<span>事件：</span>
						<input v-model="eventtitle" style="background-color: white;width: 84%;" value="请输入事件" />
					</div>
					<div class="do_box">
						<span>时间：</span>
						<picker @change="pickstartdate($event)" mode="date" style="width: 35%;text-align: center;">{{ startdateData }}</picker>
						<text style="margin: 0 3px;">至</text>
						<picker @change="pickenddate($event)" mode="date" style="width: 35%;text-align: center;">{{ enddateData }}</picker>
					</div>
					<div class="do_box">
						<text>参与方式：</text>
						<input v-model="eventspace" style="background-color: white;width: 75%;" value="请输入参与方式" />
					</div>
					<div class="do_box">
						<picker @change="picktype($event)" mode="selector" :range="typeList" style="width: 90%;">类型：{{ typeData }}</picker>
					</div>
					<div v-if="ismode"class="do_box">
						<picker @change="pickrange($event)" mode="selector" :range="selectList" style="width: 90%;">范围：{{ rangeData }}</picker>
					</div>
					<div v-if="0" class="do_box">
						<radio color="#007AFF" style="scale: 0.8;">
							<text style="color: grey;font-size: 16px;">同步到个人事件</text>
						</radio>
					</div>
				</div>
			</view>
		</view>
		<div class="mask" :class="{'active':modifypopup_animation }" v-if="modifypopup" @click="hidemodifypopup()"></div>
		<swiper class="modifypopup" v-if="modifypopup" :class="{'active':modifypopup_animation }" :current="modifycurrent">
			<swiper-item @touchmove.stop>
				<view>
					<div class="modify_bar">
						<text>待办状态</text>
						<div class="modify_meg">
							<text style="float: left;color: #a7a7a7;line-height: 24px;margin-right: 8px;">{{modifyitem.status=='true' ? '已完成' : '未完成'}}</text>
							<switch v-if="modifyitem.status=='true'" style="float: left;height: 24px;" checked @change="modifystatus()"></switch>
							<switch v-else style="float: left;height: 24px;" @change="modifystatus()"></switch>
						</div>
					</div>
					<div class="line"></div>
					<div class="modify_bar">
						<text>待办名称</text>
						<div class="modify_meg" @click="tomodify_input('待办名称')">
							<text style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;float: left;color: #a7a7a7;line-height: 24px;max-width: 240px;">{{modifyitem.title}}</text>
							<image style="float: left;width: 24px;height: 24px" src="/static/arrow-right.png"></image>
						</div>
					</div>
					<div class="line"></div>
					<div class="modify_bar">
						<text>参与方式</text>
						<div class="modify_meg" @click="tomodify_input('参与方式')">
							<text style="overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;float: left;color: #a7a7a7;line-height: 24px;max-width: 230px;">{{modifyitem.space}}</text>
							<image style="float: left;width: 24px;height: 24px" src="/static/arrow-right.png"></image>
						</div>
					</div>
					<div class="line"></div>
					<div class="modify_bar">
						<text>待办时间</text>
						<div class="modify_meg">
							<picker style="color: #a7a7a7" @change="modifystartdate($event)" mode="date">{{modifyitem.starttime}}</picker>
							<text style="float: left;color: #a7a7a7;line-height: 24px;">至</text>
							<picker style="color: #a7a7a7" @change="modifyenddate($event)" mode="date">{{modifyitem.endtime}}</picker>
						</div>
					</div>
					<div class="line"></div>
					<div class="modify_bar">
						<text>待办提醒</text>
						<div class="modify_meg">
							<picker @change="remindrange($event)" mode="selector" :range="remindList" style="float: left;color: #a7a7a7;line-height: 24px;">{{modifyitem.remind}}</picker>
							<image style="float: left;width: 24px;height: 24px" src="/static/arrow-right.png"></image>
						</div>
					</div>
					<div class="line"></div>
					<div class="btn_line">
						<text style="color:red;float: right;margin: 5% 10%;font-size: 18px;" @click="hidemodifypopup()">取消</text>
						<text style="color: #007AFF;float: right;margin: 5% 10%;font-size: 18px;" @click="modifywork()">完成</text>
					</div>
				</view>
			</swiper-item>
			<swiper-item @touchmove.stop>
				<div class="modify_input">
					<image src="/static/arrow-left.png" style="width: 24px;height: 24px;" @click="backmodify()"></image>
					<text>修改{{modify_title}}</text>
					<text style="color: black;" @click="confirmmodify()">完成</text>
				</div>
				<div style="display: flex;flex-direction: column;align-items: center;">
					<textarea 
					    style="width: 90%;font-size: 16px;background-color: white;border-radius: 10px;padding: 8px;resize: none; min-height: 40px; "
					    v-model="modify_content"
					    :auto-height="true" 
					    :max-height="200" 
					    placeholder="请输入内容"
					    placeholder-style="color: #999;padding-left: 2px;" >
					</textarea>
				</div>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		onShareAppMessage(){},
		onShareTimeline(){},
		data() {
			return {
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#ff0000'
					}
				}],
				modifycurrent:0,
				islongPress: false,
				nowtime: new Date().getTime(),
				modifypopup_animation:false,
				modifypopup:false,
				ismask: false,
				isWait: false,
				ismode: false,
				isActive: false,
				showPopup: false,
				modifyitem:[],
				mywork: [],
				internetCode: 200,
				selectList: ['全校', '电气工程与智能制造学院', '建筑与土木学院', '经济管理学院', '人文学院', '建筑管理学院', '艺术与传媒学院', '人工智能与大数据学院',
					'体育与大健康学院', '继续教育学院', '马克思主义学院'
				],
				typeList:['竞赛','活动','考试','生活服务'],
				remindList:['开始前','结束前','不提醒'],
				startdateData: '开始日期',
				enddateData: '结束日期',
				typeData:'请选择事件类型',
				rangeData: '全校',
				eventtitle: '',
				eventspace: '',
				modify_title:'',
				modify_content:'',
			}
		},
		onPullDownRefresh: function() {
			this.mywork = [],
			this.fetchData(),
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		created() {
			this.fetchData();
			islongPress: false
			var tzoffset =(new Date()).getTimezoneOffset()* 60000;
			this.nowtime =(new Date(Date.now() -  tzoffset));
		},
		methods: {
			fetchData() {
				uni.getStorageInfo({
					success: (res) => {
						if(!res.keys.includes('Storageuser')){
							console.log("未登录")
							uni.removeStorageSync('work')
						}
						else if (res.keys.includes('Storageuser') && !res.keys.includes('work')) {
							var name= uni.getStorageSync('Storageuser').id
							var localurl="https://127.0.0.1/data/"+name+".json"
							uni.request({
								url: localurl,
								success: res => {
									if (res.statusCode === 404) {
										internetCode = 404
									} else {
										let data = res.data;
										uni.setStorageSync("work", data.info)
										this.mywork = data.info;
										console.log(res.data)
									}
								},
								fail: err => {
									console.log(err);
								}
							});
						}
						else{
							this.mywork = uni.getStorageSync('work')
						}
					}
				})
			},
			changeStatus(item) {
				uni.getStorageInfo({
					success: (res) => {
						if(res.keys.includes('Storageuser')){
							if (item.status === "true") {
								item.status = "false";
							} else {
								item.status = "true"
							}
							this.postlocaljson();
							console.log(item.status)
						}
						else{
							uni.showToast({
								title:'操作失败，请先登陆',
								duration:2000,
								icon:'none'
							})
						}
					}
				})
			},
			postlocaljson() {
				uni.setStorageSync("work", this.mywork)
				console.log(this.mywork)
			},
			longpress() {
				console.log("长按事件");
				this.islongPress = true;
			},
			boxclick() {
				if (this.islongPress === false) {
					console.log("不是长按事件");
				} else if (this.islongPress === true) {
					console.log("长按事件");
				}
			},
			touchend() {
				setTimeout(() => {
					this.islongPress = false
				}, 200)
			},
			showpopup() {
				this.showPopup = true;
				this.isWait = false;
				setTimeout(() => {
					this.ismask = true
					this.isActive = true;
				}, 100);
			},
			waitpopup() {
				this.isWait = true;
				this.ismask = false;
				setTimeout(() => {
					this.isActive = false;
				}, 500);
			},
			wakepopup() {
				uni.getStorageInfo({
					success: (res) => {
						if (res.keys.includes('Storageuser')) {
							if (this.isWait === true) {
								this.ismask = true;
								this.isActive = true;
								this.isWait = false;
							}
							if (this.showPopup === false) {
								this.showpopup()
							}
						} else {
							uni.showToast({
								title: '请先登陆',
								duration: 2000,
								icon: 'error'
							})
						}
					}
				})
			},
			hidepopup() {
				this.isWait = false;
				this.isActive = false;
				this.startdateData = '开始日期',
					this.enddateData = '结束日期',
					this.rangeData = '全校',
					this.eventtitle = '',
					this.eventspace = '',
					this.typeData='请选择事件类型'
					setTimeout(() => {
						this.showPopup = false;
					}, 500);
			},
			swap_mode(mode) {
				if (mode === 'private') {
					this.ismode = false
				} else {
					this.ismode = true
				}
			},
			pickrange(e) {
				var index = e.target.value
				this.rangeData = this.selectList[index]
			},
			picktype(e) {
				var index = e.target.value
				this.typeData = this.typeList[index]
			},
			pickstartdate(e) {
				let starttime = e.target.value;
				if (this.enddateData === '结束日期') {
					this.startdateData = starttime
				} else {
					let time = new Date(starttime)
					let etime = new Date(this.enddateData)
					if (time.getTime() > etime.getTime()) {
						uni.showToast({
							title: '开始日期不合法',
							icon: 'error',
							duration: 2000
						})
					} else {
						this.startdateData = starttime
					}
				}
			},
			pickenddate(e) {
				let endttime = e.target.value;
				if (this.startdateData === '开始日期') {
					this.enddateData = endttime
				} else {
					let time = new Date(endttime)
					let stime = new Date(this.startdateData)
					if (time.getTime() < stime.getTime()) {
						uni.showToast({
							title: '结束日期不合法',
							icon: 'error',
							duration: 2000
						})
					} else {
						this.enddateData = endttime
					}
				}
			},
			addwork() {
				uni.getStorageInfo({
					success: (res) => {
						if(res.keys.includes('Storageuser')){
							if (this.eventtitle === '' || this.eventspace === '' || this.startdateData === '开始日期' || this
								.enddateData === '结束日期' ||this.typeData==='请选择事件类型') {
								uni.showToast({
									title: '请输入完整',
									icon: 'error',
									duration: 2000
								})
							} else if (this.ismode === true) {
								let newwork = {
									"title": this.eventtitle,
									"starttime": this.startdateData,
									"endtime": this.enddateData,
									"space": this.eventspace,
									"type":this.typeData,
									"range":this.rangeData,
									"status": "false",
									"remind":"不提醒"
								}
								uni.request({
									url:'https://127.0.0.1/data/postevent.php',
									method: 'POST',
									header: {
										'content-type': 'application/json',
									},
									data:newwork,
									success: (res) => {
										if (res.data === 'New record created successfully') {
											uni.showToast({
												title: '提交成功，正在审核中',
												duration: 2000,
												icon: 'success'
											})
											this.mywork.unshift(newwork)
											this.postlocaljson()
											this.hidepopup()
										} else {
											console.log(res)
											uni.showToast({
												title: '载入失败，请再试一下',
												duration: 2000,
												icon: 'none'
											})
										}
									}
								})
							} 
							else {
								let newwork = {
									"title": this.eventtitle,
									"starttime": this.startdateData,
									"endtime": this.enddateData,
									"space": this.eventspace,
									"type":this.typeData,
									"range":this.rangeData,
									"status": "false"
								}
								uni.showToast({
									title: '添加成功',
									duration: 2000,
									icon: 'success'
								})
								this.mywork.unshift(newwork)
								this.postlocaljson()
								this.hidepopup()
							}
						}
						else{
							uni.showToast({
								title:'请先登陆',
								duration:2000,
								icon:'none'
							})
						}
					}
				})
			},
			swipeclick(targetitem) {
				this.mywork = this.mywork.filter(item => JSON.stringify(item) !== JSON.stringify(targetitem));
				this.postlocaljson()
			},
			hidemodifypopup(){
				this.modifypopup_animation=false;
				setTimeout(() => {
					this.modifypopup = false;
					this.modifyitem=[]
				}, 500);
			},
			tomodify(item){
				this.modifyitem = JSON.parse(JSON.stringify(item));
				if (!('remind' in this.modifyitem)) {
				    this.modifyitem.remind = '不提醒'; 
				  }
				this.modifypopup=true;
				setTimeout(() => {
					this.modifypopup_animation=true;
				}, 1);
			},
			modifystatus(){
				if(this.modifyitem.status=='false'){
					this.modifyitem.status='true'
				}
				else{
					this.modifyitem.status='false'
				}
			},
			remindrange(e) {
				var index = e.target.value
				this.modifyitem.remind = this.remindList[index]
			},
			tomodify_input(name){
				this.modify_title=name;
				this.modifycurrent=1;
				this.getmodify_content()
			},
			getmodify_content(){
				switch(this.modify_title){
					case '参与方式':
						this.modify_content=this.modifyitem.space;
						break;
					case '待办名称':
						this.modify_content=this.modifyitem.title;
						break;
				}
			},
			backmodify(){
				this.modifycurrent=0;
			},
			confirmmodify(){
				if (!this.modify_content || this.modify_content.trim() === '') {
					uni.showToast({
						title:'不能为空',
						duration:2000,
						icon:'none'
					})
				}else{
					switch(this.modify_title){
						case '参与方式':
							this.modifyitem.space=this.modify_content;
							break;
						case '待办名称':
							this.modifyitem.title=this.modify_content;
							break;	
					}
					this.backmodify()
					this.modify_content = '';
				}
			},
			modifystartdate(e) {
				let starttime = e.target.value;
				let time = new Date(starttime)
				let etime = new Date(this.modifyitem.endtime)
				if (time.getTime() > etime.getTime()) {
					uni.showToast({
						title: '开始日期不合法',
						icon: 'error',
						duration: 2000
					})
				} else {
					this.modifyitem.starttime = starttime
				}
			},
			modifyenddate(e) {
				let endttime = e.target.value;
				let time = new Date(endttime)
				let stime = new Date(this.modifyitem.starttime)
				if (time.getTime() < stime.getTime()) {
					uni.showToast({
						title: '结束日期不合法',
						icon: 'error',
						duration: 2000
					})
				} else {
					this.modifyitem.endtime = endttime
				}
			},
			modifywork(){
				const itemIndex = this.mywork.findIndex(item => item.id === this.modifyitem.id);
				  if (itemIndex !== -1) {
				    this.mywork = [
				      ...this.mywork.slice(0, itemIndex),
				      this.modifyitem,
				      ...this.mywork.slice(itemIndex + 1)
				    ];
				    this.postlocaljson();
				    uni.showToast({ title: '修改成功', duration: 1500, icon: 'none' });
				  }
				  this.hidemodifypopup()
			},
		}
	}
</script>

<style>
	template {
		height: 100%;
		width: 100%;
	}
	.line {
		width: 100%;
		height: 1px;
		background-color: #E7E7E7;
	}
	.content {
		margin-top: 11%;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: left;
		justify-content: center;
	}

	.titlebox {
		top: 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-left: 15px;
		margin-bottom: 10px;
		letter-spacing: 1px;
	}

	.my_work_box {
		margin: 10px 5px;
		display: flex;
		flex-direction: column;
		align-items: left;
		justify-content: center;
	}

	.work_box {
		display: flex;
		width: 100%;
		background-color: white;
		flex-direction: row;
		align-items: center;
		border-radius: 15px;
		margin: 2.5% 0 0 0;
		justify-content: space-between;
	}

	.work_box_message {
		display: flex;
		flex-direction: column;
	}

	.work_box_radio {
		margin-right: 20px;
	}

	.swiper-item {
		margin: 0 !important;
		height: auto !important;
		float: left;
	}

	.mask {
		position: fixed;
		height: 100%;
		width: 100%;
		background-color: grey;
		opacity: 0;
		bottom: 0;
		transition: opacity 0.5s ease-in-out;
	}

	.mask.active {
		opacity: 0.5;
	}

	.popup {
		position: fixed;
		margin-left: 2%;
		border-style: solid;
		box-shadow: #f1f1f1;
		border-color: #f1f1f1 #f1f1f1 #f8f8f8 #f1f1f1;
		border-radius: 30px 30px 0 0;
		bottom: 0;
		width: 95%;
		height: 310px;
		background-color: #f8f8f8;
		z-index: 999;
		transform: translateY(100%);
		transition: transform 0.5s ease;
	}

	.popup.active {
		transform: translateY(0);
	}

	.popup.wait {
		transform: translateY(70%);
	}

	.popup-body {
		padding: 20rpx;
	}

	.popup-head {
		margin: 1% 3% 4%;
		display: flex;
		justify-content: space-between;
	}

	.mode-bar {
		margin-bottom: 15px;
		width: 97%;
		height: 30px;
		border-style: solid;
		border-color: #ffffff;
		border-width: 5px;
		border-radius: 30px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.mode-bar-choose {
		height: 100%;
		letter-spacing: 0.5px;
		width: 100%;
		display: flex;
		margin: auto;
		align-items: center;
		justify-content: center;
		border-color: #ffffff;
		border-width: 1px;
		border-style: solid;
	}

	.mode-bar-choose.point {
		background-color: white;
	}

	.put_box {
		background-color: #fcfcfc;
		display: flex;
		flex-direction: column;
		border-radius: 10px;
	}

	.do_box {
		display: flex;
		flex-direction: row;
		margin: 5px 0;
	}
	.modifypopup{
		position: fixed;
		display: flex;
		flex-direction: column;
		margin-left: 0%;
		border-style: solid;
		box-shadow: #f1f1f1;
		border-color: #f1f1f1 #f1f1f1 #f8f8f8 #f1f1f1;
		border-radius: 30px 30px 0 0;
		bottom: 0;
		width: 100%;
		height: 380px;
		overflow-y: auto;
		background-color: #f8f8f8;
		z-index: 999;
		transform: translateY(100%);
		transition: transform 0.5s ease;
	}
	.modifypopup.active {
		transform: translateY(0);
	}
	.modify_bar{
		margin: 5% 5% 4%;
		display: flex;
		justify-content: space-between;
		font-size: 18px;
		align-items: center;
	}
	.modify_meg{
		display: flex;
		flex-direction: row;
	}
	.modify_input {
		margin: 5% 7% 4%;
		display: flex;
		justify-content: space-between;
	}
	.btn_line{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
</style>